import React from 'react'
import { Check } from 'lucide-react'
import { cn } from '../../utils/cn'

interface OnboardingStepProps {
  title: string
  stepNumber: number
  isActive: boolean
  isCompleted: boolean
}

export function OnboardingStep({ title, stepNumber, isActive, isCompleted }: OnboardingStepProps) {
  return (
    <div className="flex items-center">
      <div className={cn(
        "flex items-center justify-center w-8 h-8 rounded-full border-2 text-sm font-medium",
        isCompleted 
          ? "bg-green-500 border-green-500 text-white"
          : isActive 
          ? "bg-blue-500 border-blue-500 text-white"
          : "bg-gray-100 border-gray-300 text-gray-500"
      )}>
        {isCompleted ? (
          <Check className="h-4 w-4" />
        ) : (
          stepNumber
        )}
      </div>
      
      <div className="ml-3">
        <p className={cn(
          "text-sm font-medium",
          isActive ? "text-blue-600" : isCompleted ? "text-green-600" : "text-gray-500"
        )}>
          {title}
        </p>
      </div>
    </div>
  )
}